<template>
  <div class="data_title">
    <i class="iconfont icon-shujukanban"></i>
    <h2>固件列表</h2>
  </div>

  <el-card style="width: 80%">
    <el-table :data="tableData" style="width: 80%" :row-class-name="tableRowClassName">
      <el-table-column prop="index" label="序号" width="180" />
      <el-table-column prop="name" label="版本号" width="180" />
      <el-table-column prop="date" label="上传日期" width="180" />
      <el-table-column prop="mark" label="状态" width="180" />
      <el-table-column prop="user" label="操作员" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default>
          <el-button type="text" size="small" @click="handleClick">生效</el-button>
          <el-button type="text" size="small" @click="handleClick">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="page-style"
      :page-size="20"
      :pager-count="5"
      layout="prev, pager, next"
      :total="100"
    ></el-pagination>
  </el-card>
  <div class="bt_add">
    <el-button type="primary" :icon="CirclePlus" @click="AddOTA">增加</el-button>
  </div>
</template>

<script setup>
import { CirclePlus } from '@element-plus/icons-vue'
import VueEvent from '../utils/event';

const AddOTA = () => {
  const web_name = "AddOTA";
  VueEvent.emit("tomsg", { web_name });
}

const tableRowClassName = ({ row }) => {
  console.log(row.mark);
  if (row.mark === '生效') {
    return 'active-ota';
  } else {
    return ''
  }
}

const tableData = [
  {
    index: '1',
    name: 'version 1.0',
    user: 'admin',
    date: '2016-05-03',
    mark: '等待'
  },
  {
    index: '2',
    name: 'version 1.0',
    user: 'admin',
    date: '2016-05-03',
    mark: '等待'
  },
  {
    index: '3',
    name: 'version 1.0',
    user: 'admin',
    date: '2016-05-03',
    mark: '等待'
  },
  {
    index: '4',
    name: 'version 1.0',
    user: 'admin',
    date: '2016-05-03',
    mark: '生效'
  },
]
</script>

<style>
.bt_add {
  position: absolute;
  right: 22%;
  top: 20px;
}

.active-ota {
  background-color: aquamarine !important;
}

.page-style {
  margin-top: 20px;
}
</style>